/*
 * @Descripttion:  封装k线视图
 * @Author: maybe
 * @Date: 2019-07-13 17:32:17
 * //开盘(open)，收盘(close)，最低(lowest)，最高(highest)
 */
import {formatDate} from '@/assets/js/rule'
var kline = new Object;
kline = {
    myChart:'',
    clearState:true,
    dates:[], //时间的数组 目前取得是id
    currentType:1,  // 1蜡烛图 、 2范围图3折线图
    dataArr:[], //当前的dataArr
    dataArr1:[], 
    dataArr2:[],    // open
    dataArr3:[],  // high
    dataArr4:[],  //vol
    dataArr5:[],
}
//  初始化函数
kline.init = function(myChart,data) {
    this.myChart = myChart;
    this.dates = [];    
    this.dataArr1 = [];
    this.dataArr2 = [];
    this.dataArr3 = [];
    this.dataArr4 ==[];
    this.dataArr5= [];
    splitData(data);
    
    // this.dates = calculate(data,'id');    
    // this.dataArr1 = getDataArr(data);
    // this.dataArr2 = calculate(data,'open')
    // this.dataArr3 = calculate(data,'high') 
    // this.dataArr4 = calculate(data,'vol')
    // console.log(this.dataArr4)
    changeOptions();
    // this.myChart.dispatchAction({
    //     type: 'brush',
       
    // });
    this.myChart.setOption(this.options,true);  
}


function splitData(data){
    for (var i = 0;i < data.length;i++) {      
        kline.dates.push(formatDate(data[i]['id'],'MM-dd hh:mm'));
        kline.dataArr1.push([+data[i]['open'],+data[i]['close'],+data[i]['low'],+data[i]['high']])
        kline.dataArr2.push(data[i]['open'])
        kline.dataArr3.push(data[i]['high'])
        kline.dataArr4.push([formatDate(data[i]['id'],'MM-dd hh:mm'),data[i]['vol'],data[i]['open'] > data[i]['close'] ? 1 : -1]);
        kline.dataArr5.push([formatDate(data[i]['id'],'MM-dd hh:mm'),data[i]['open'] > data[i]['close'] ?data[i]['vol']:-data[i]['vol']]);
    }   
}


var series =  [
    {      //蜡烛线0
        type: 'candlestick',
        name: '日线',
        data: [],
        itemStyle: {
            normal: {
                color: '#E53737',  //红
                color0: '#23c224', // 绿
                borderColor: '#E53737',
                borderColor0: '#23c224'
            }
        },
        markPoint: {
            label: {
                normal: {
                    formatter: function (param) {
                        return param != null ? Math.round(param.value) : '';
                    }
                }
            },
        }
    },{    //范围线1
        type: 'line',
        name: '折线',
        data: [],
        smooth: true,   
        areaStyle: {
            normal: {
            color:"#393B63", //改变区域颜色
            opacity:0.2
            }},
        lineStyle: {
            normal: {
                width: 0.8,
                color:'#fff'
            }
        }
    },{    //折线2
        name: 'MA10',
        type: 'line',
        data:[],
        smooth: true,              
        lineStyle: {
            normal: {
                width: 1,
                color:'#fff'
            }
        }
    },{    //折线 3
        name:'MA20',
        type:'line',
        data:[],
        smooth: true,              
        lineStyle: {
            normal: {
                width: 1,
                color:'#fff'
            }
        },
        
    },{   //vol 4
        name: 'Volume',
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 1,
        barMinHeight:2,
        itemStyle:{
            color:function(params){
                var color = '';  
                if(params.value[2] == 1){
                    color='#23c224'; 
                }else{
                    color='#E53737';
                }
                return color;
            },
        },
        data:[]
    },
    {  //5
        name: 'RSI',
        type: 'bar',
        xAxisIndex: 1,
        yAxisIndex: 1,
        barMinHeight:2,
        itemStyle:{
            color:function(params){
                var color = '';            
                if(params.value[1] >0){
                    color='#23c224'; 
                   
                }else{
                    color='#E53737';
                }
                return color;
            },
        },
        data:[] 
    }
]



kline.changeType =function(i) {
    if(i == this.currentType){return false;}
    this.currentType = i;
    changeOptions(i,true);
    this.myChart.setOption(this.options,true); 
}
//  更改options  指标类也放在这里
function changeOptions(i,flag){
    i = i || kline.currentType;
    kline.options.xAxis[0].data =  kline.dates;
    kline.options.xAxis[1].data =  kline.dates;
    if((i == 1) || (i==2) || (i==3)){
        kline.dataArr = kline.currentType == 1?kline.dataArr1:kline.currentType == 2 ? kline.dataArr2:kline.dataArr3;
        kline.options.series = series;
        kline.options.series[i-1].data = kline.dataArr
        series.forEach(function(item,index){
            if((i-1) != index ){
                kline.options.series[index].data = [];           
            }
        })
        if(flag){kline.myChart.clear();}
    }else if(i==4){   //指标     
        if(flag){kline.myChart.clear();}
        kline.options.series[0].data = kline.dataArr1;
        kline.options.series[1].data = calculateMA(5);
        kline.options.series[2].data = calculateMA(10);
        kline.options.series[3].data = calculateMA(20);   
    }else if(i == 5){
        kline.options.series[5].data = [];
        kline.options.series[4].barMinHeight = 2
        kline.options.series[4].data = kline.dataArr4;
    }else if(i == 6){
        kline.options.series[4].data = [];
        kline.options.series[5].barMinHeight = 2
        kline.options.series[5].data = kline.dataArr5;
    }
   
}
//增加数据
kline.add = function(item){
    //新增  
    kline.dates.push(formatDate(item.id,'MM-dd hh:mm'));
    kline.dataArr1.push([+item.open,+item.close,+item.low,+item.high])
    kline.dataArr2.push(item.open)
    kline.dataArr3.push(item.high)
    kline.dataArr4.push([formatDate(item.id,'MM-dd hh:mm'),item.vol,item.open > item.close ? 1 : -1]);
    kline.dataArr5.push([formatDate(item.id,'MM-dd hh:mm'),item.open > item.close ?item.vol:-item.vol]);
    if(this.dates.length > 100){
        this.dates.shift();
        this.dataArr1.shift();
        this.dataArr2.shift();
        this.dataArr3.shift();
        this.dataArr4.shift();
        this.dataArr5.shift();
    }  
    changeOptions();
     this.myChart.setOption(this.options,true);
    // this.myChart.resize();
}
function calculateMA(dayCount) {
    var result = [];
    for (var i = 0, len =kline.dataArr1.length; i < len; i++) {
        if (i < dayCount) {
            result.push('-');
            continue;
        }
        var sum = 0;
        for (var j = 0; j < dayCount; j++) {
            sum += kline.dataArr1[i - j][1];
        }
        result.push(sum / dayCount);
    }
    return result;
}

kline.deleate = function(item){
    kline.dates.push(formatDate(item.id,'MM-dd hh:mm'));
    kline.dataArr1.push([+item.open,+item.close,+item.low,+item.high])
    kline.dataArr2.push(item.open)
    kline.dataArr3.push(item.high)
    kline.dataArr4.push([formatDate(item.id,'MM-dd hh:mm'),item.vol,item.vol,item.open > item.close ? 1 : -1]);
    kline.dataArr5.push([formatDate(item.id,'MM-dd hh:mm'),item.open > item.close ?item.vol:-item.vol]);
    changeOptions();
    this.myChart.setOption(this.options,true); 
    this.dates.pop();
    this.dataArr1.pop();
    this.dataArr2.pop();
    this.dataArr3.pop();
    this.dataArr4.pop();
    this.dataArr5.pop();
}
//定义初始化数据
// dom  vue refs var dom = this.$refs.line;
kline.options = {
        backgroundColor:'',      
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                animation: false,
                type: 'cross',
            }
        },  
        dataZoom: [{
            type: 'inside',
            xAxisIndex: [0, 1],
            start: 0,
            end: 100,
            minValueSpan: 10           
        },{
                type: 'inside',
                xAxisIndex: [0, 1],
                start: 0,
                end: 100,
                top: 30,
                height: 20
            }
        ],             
        xAxis: [{
            type: 'category',
            data: [],           
            axisLine: { lineStyle: { color: '#8392A5',width:1,type:"solid" }},      
            splitLine:{
                show:true,
                lineStyle:{
                    type:'dashed',
                    color:'rgba(255,255,255,0.04)',
                    width:'1',
                }
            }
        },
        {
            type: 'category',
            gridIndex: 1,
            
            data: [],
            boundaryGap : false,
            splitLine: {show: false},
            axisLabel: {show: false},
            axisTick: {show: false},
            axisLine: { lineStyle: { color: '#8392A5',width:1,type:"solid" }},          
        }
        ],
        yAxis:[{
                scale: true,
                axisLine: { "show":false, lineStyle: { color: '#8392A5' }},
                position:'right',
                splitLine:{
                    show:true,
                    lineStyle:{
                        type:'dashed',
                        color:'rgba(255,255,255,0.04)',
                        width:'1',    
                    }
                }
            },
            {
                scale: true,
                gridIndex: 1,
                splitNumber: 2,
                position:'center',
                axisLabel: {show: false},
                axisLine: {show: false},
                axisTick: {show: false},
                splitLine:{
                    show:false,
                    lineStyle:{
                        type:'dashed',
                        color:'rgba(255,255,255,0.04)',
                        width:'1',    
                    }
                }
            }
        ],    
        grid:[{
            bottom:40,
            top:20,
            left:0,
            right:40
        },{
            left: 0,
            right: 40,
            height: 80,
            bottom:40,            
        }],
        
        series: [],
}
export default kline;
